/**
 * Created by fangyukui on 2017/10/31.
 */


import React,{Component} from  'react';
import {
    AppRegistry,
    StyleSheet,
    Image,
    View,
    Text,
    TouchableOpacity,
    AlertIOS
}from 'react-native';

class  KyTouchable extends  Component{
    /**
     * 构造函数
     * @param props
     */
    constructor(props){
        super(props);
        console.log('constructor');
        this.state = {
            showT:''
        }
    }
    /**
     *
     */
    componentWillMount() {
        console.log('componentWillMount');
    }

    /**
     * 渲染
     * @returns {XML}
     */
    render(){
        console.log('render');
        return(
           <View style={styles.container}>
               <TouchableOpacity activeOpacity={0.5}
                                 onPress={()=>{this.setState({showT:'点击'})}}
                                 onPressIn={()=>{this.setState({showT:'按下'})}}
                                 onPressOut={()=>{this.setState({showT:'松开'})}}
                                 onLongPress={()=>{this.setState({showT:'长按'})}}
               >
               <View>
                   <Text style={styles.textStyle}>{this.props.title}</Text>
                   <Text style={styles.textStyle}>我是文本,可以点击</Text>
                   <Text>{this.state.showT}</Text>
               </View>
               </TouchableOpacity>
           </View>

        );
    }

    componentDidMount() {
        console.log('componentDidMount');
    }
    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps');
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true;
    }

    componentWillUpdate(){
        console.log('componentWillUpdate');
    }


    componentDidUpdate() {
        console.log('componentDidUpdate');
    }

    componentWillUnmount() {
        console.log('componentWillUnmount');
    }





}

KyTouchable.properties = {
    showT:React.PropTypes.string
}
KyTouchable.defaultProps = {
   title:'我是默认属性'
}

const  styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'red',
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'

    },
    textStyle:{
        color:'white',

    }

});

module.exports = KyTouchable;

// constructor
// KyTouchable.js:33 componentWillMount
// KyTouchable.js:41 render
// KyTouchable.js:62 componentDidMount
// KyTouchable.js:68 shouldComponentUpdate
// KyTouchable.js:73 componentWillUpdate
// KyTouchable.js:41 render
// KyTouchable.js:78 componentDidUpdate
// KyTouchable.js:68 shouldComponentUpdate
// KyTouchable.js:73 componentWillUpdate
// KyTouchable.js:41 render
// KyTouchable.js:78 componentDidUpdate

